Tailwind CSSのJust-in-Time Mode

これ一つで複数の機能が有効になる

確かにJITに関連してはいるが、「JIT」で推測できる内容を超えているmrsekut.icon

Tailwind CSS v3.0からはdefaultで有効になる

v2.1のときの資料

v3でのdocsが存在しない？

この辺が有効になる

開発時のパフォーマンスが上がる

prod buildでは元からbuild時に必要なものだけを残す様になっていたが、開発時は全読み込みしてたので遅かったらしい

JIT modeを使うことで開発時も同様に使用するもののみを読み込むので速くなる

variantを混合して使えるようになった

以前のことを知らないが、:hoverとか:activeとかは個別に書かないといけなかったらしいmrsekut.icon

[]を使って、任意の値を指定できる

なぜこのへんがJITとセットなのか、を説明している

https://youtu.be/TfR_0zbjKOM

参考

まとまっている

色々一望できて良い

!でimportant

兄弟要素の状態を加味できる ref

やりすぎ感あるmrsekut.icon

code:ts

<label>

<span class="w-4 h-4 bg-gray-100 peer-checked:bg-blue-500 peer-checked:text-blue-50">チェックボックスだよ！</span>

</label>